<template>
  <div class="box p30">
    <el-form ref="formDate" class="form-container" :model="formDate" label-width="120px" v-loading="loading">
      <h3 class="header-title">注册</h3>
      <el-form-item label="登陆账号">
        <el-input v-model="formDate.userid"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formDate.userName"></el-input>
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model.number="formDate.phoneNumber" type="phoneNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="formDate.userPwd" placeholder="请输入密码" show-password autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item class="btn-box">
        <el-button :loading="loading" type="primary" @click.native.prevent="handleSubmit">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { register } from '@/api/user'
export default {
  data() {
    return {
      loading: false,
      formDate: {
        userid: '',
        phoneNumber: '',
        userPwd: '',
        userName: ''
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.formDate.validate(valid => {
        if (valid) {
          this.loading = true
          register(this.formDate).then((res) => {
            this.$message.success(res.message)
            this.$router.push({ path: '/company-register' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.form-container{
  width: 600px;
  margin: 0 auto;
}
.header-title{
  text-align: center;
}
.btn-box{
  text-align: center;
}
</style>
